<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view :style="{ backgroundColor: bgColor, minHeight: 'calc(100vh - 55px)' }" class="page-img">
		<!-- #ifndef H5 -->
		<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
			<ns-navbar :background="bgNav" :title-color="textNavColor" :globalS="diyData.global" :scrollTop="scrollTop"></ns-navbar>
		</view>
		<!-- #endif -->

		<diy-index-page ref="indexPage" :value="topIndexValue" :scrollHeight="scrollHeight" :scrollTopHeight="scrollTopHeight" :bgUrl="bgUrl" v-if="topIndexValue">
			<diy-group ref="diyGroup" :diyData="diyData" :storeId="storeId" v-if="diyData.value" :height="scrollTopHeight" @selectMap="selectMap"></diy-group>
			<view class="padding-bottom"><ns-copyright></ns-copyright></view>
		</diy-index-page>

		<scroll-view v-else scroll-y="true" show-scrollbar="false" :style="{ height: 'calc(100vh - ' + headerHeight + ' - 55px)' }" @scroll="scroll">
			<view class="bg-index" :style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
				<diy-group ref="diyGroup" :diyData="diyData" v-if="diyData.value" :storeId="storeId" @selectMap="selectMap"></diy-group>
				<view class="padding-bottom"><ns-copyright></ns-copyright></view>
			</view>
		</scroll-view>

		<template v-if="diyData.global && diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
			<view @touchmove.prevent.stop>
				<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
					<view class="image-wrap">
						<image
							:src="$util.img(diyData.global.popWindow.imageUrl)"
							:style="popWindowStyle"
							@click="uniPopupWindowFn()"
							mode="aspectFit"
						></image>
					</view>
					<text class="iconfont icon-round-close" @click="closePopupWindow"></text>
				</uni-popup>
			</view>
		</template>

		<!-- 底部tabBar -->
		<view class="page-bottom" v-if="openBottomNav"><diy-bottom-nav @callback="callback" :name="name"></diy-bottom-nav></view>


		<!-- 收藏 -->
		<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
			<view v-if="showTip" class="collectPopupWindow" :style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
				<image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit"></image>
				<text @click="closeCollectPopupWindow">我知道了</text>
			</view>
		</uni-popup>
		
		<!-- 位置 -->
<!-- 		<uni-popup ref="locationPop" type="bottom" background-color="#fff">
			<view class="locat-pop">
				<view class="cont">
					<view class="h1">用户隐私保护提示</view>
					在你使用玖钻通信服务之前，请仔细阅读
					<view class="act">
						《玖钻通信小程序隐私保护指引》
					</view>
					如你同意该指引，请点击“同意”开始使用本小程序。
				</view>
				<view class="btns">
					<view class="on btn" @click="cancel">取消</view>
					<view class="ok btn" @click="confim">确认</view>
				</view>
			</view>
		</uni-popup> -->
		
		<!-- 位置 -->
<!-- 		<uni-popup ref="locationPopTop" type="center" background-color="#fff">
			<view class="locats-pop">
				<view class="title">
					定位服务未开启
				</view>
				<view class="cont">
					请进入系统设置中开启定位开关，并允许应用使用定位服务
				</view>
				<view class="btns">
					<view class="on btn" @click="cancels">取消</view>
					<view class="ok btn" @click="confims">立即开启</view>
				</view>
			</view>
		</uni-popup> -->
		
		
		<!-- 当前位置 -->
		<uni-popup ref="actLocationPop" type="bottom" background-color="#fff">
			
		</uni-popup>
		
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
import diyJs from '@/common/js/diy.js';
import indexJs from './public/js/index.js';

export default {
	components: {
		uniPopup,
		nsNavbar
	},
	mixins: [diyJs,indexJs]
};
</script>

<style lang="scss">
@import '@/common/css/diy.scss';
</style>

<style lang="scss">
	.act-locat-pop {
		.actTxt {
			color: red;
		}
	}
	.locat-pop {
		padding: 48rpx 16rpx 32rpx;
		
		.cont {
			color: #A19FA1;
		}
		.h1 {
			font-weight: 700;
			font-size: 38rpx;
			color: #333;
		}
		.act {
			color: blue;
		}
		.btns {
			display: flex;
			justify-content: center;
			margin: 32rpx 0;
			.btn {
				width: 200rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				text-align: center;
				padding: 6rpx 0;
			}
			.on {
				color: #10BF65;
				background-color: #F2F2F2;
			}
			.ok {
				background-color: #10BF65;
				color: #fff;
				margin-left: 36rpx;
			}
		}
	}
	
	.locats-pop {
		padding: 32rpx 32rpx;
		text-align: center;
		.title {
			font-size: 32rpx;
			color: #000;
			margin-bottom: 20rpx;
		}
		.cont {
			color: #A19FA1;
		}
		.btns {
			display: flex;
			justify-content: center;
			margin-top: 32rpx;
			.btn {
				width: 180rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				text-align: center;
				padding: 6rpx 0;
			}
			.on {
				color: #10BF65;
				background-color: #F2F2F2;
			}
			.ok {
				background-color: #10BF65;
				color: #fff;
				margin-left: 48rpx;
			}
		} 
	}
</style>

<style scoped>
.wap-floating >>> .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
	background: none !important;
}
/deep/ .placeholder {
	height: 0;
}
/deep/::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
	display: none;
}
/deep/ .ns-copyright-info {
	margin-top: 40rpx;
	margin-bottom: 0;
}
</style>
